<div class="leftpanel">
  <table style="width:100%">
    <tbody>
      <tr>
        <td colspan="2">
          <h3 style="text-align:center">{{sidepanel.serie.title}}
            <span><button type="button" class="close" ng-click="sidepanel.closeSidePanel()" class="pull-right">&times;</button></span>
          </h3>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <center>
            <div class="poster large" style="background-size:contain;background-position:center center;background-repeat:no-repeat;margin-bottom:5px" lazy-background="{{sidepanel.serie.poster}}"></div>
            <div style="color:rgb(208,208,208);font-size: 13px;text-align:justify"><p>{{sidepanel.serie.overview}}</p></div>
          </center>
          <div class="buttons" style="margin-bottom: 16px;">
            <a class='btn' ng-if="sidepanel.serie.trailer" href="{{sidepanel.serie.trailer}}" target="_blank">
              <i class="glyphicon glyphicon-facetime-video"></i>
              <strong translate-once>COMMON/watch-trailer/tooltip</strong>
            </a>
            <a class='btn' ng-if="!sidepanel.serie.trailer" href="https://www.youtube.com/results?search_query={{sidepanel.serie.name}}+official+trailer" target="_blank">
              <i class="glyphicon glyphicon-facetime-video"></i>
              <strong translate-once>COMMON/watch-trailer/tooltip</strong>
            </a>

            <a class='btn' ng-click="sidepanel.selectSerie()">
              <i class="glyphicon glyphicon-plus"></i>
              <strong>Add to favorites</strong>
            </a>

          </div>
        </td>
      </tr>
      <tr>
        <th translate-once>SIDEPANEL/SERIE-DETAILS/links/hdr</th>
        <td>
          <a style="text-decoration: underline" ng-href="https://www.google.com/search?q={{::sidepanel.serie.name}} (TV series)+Wikipedia&btnI=745" target="_blank">Wikipedia</a><strong> | </strong>
          <a style="text-decoration: underline" ng-href="https://www.imdb.com/title/{{::sidepanel.serie.imdb_id}}" ng-show="sidepanel.serie.imdb_id" target="_blank">IMDB</a><strong ng-show="sidepanel.serie.imdb_id"> | </strong>
          <a style="text-decoration: underline" ng-href="https://www.themoviedb.org/tv/{{::sidepanel.serie.tmdb_id}}" ng-show="sidepanel.serie.tmdb_id > 0" target="_blank">TMDB</a><strong ng-show="sidepanel.serie.tmdb_id > 0"> | </strong>
          <a style="text-decoration: underline" ng-href="https://thetvdb.com/?tab=series&id={{::sidepanel.serie.tvdb_id}}" ng-show="sidepanel.serie.tvdb_id > 0" target="_blank">TVDB</a><strong ng-show="sidepanel.serie.tvdb_id > 0"> | </strong>
          <a style="text-decoration: underline" ng-href="https://www.trakt.tv/shows/{{::sidepanel.serie.trakt_id}}" ng-hide="sidepanel.serie.trakt_id < 1" target="_blank">Trakt</a>
        </td>
      </tr>
      <tr ng-if="sidepanel.serie.airs.day" >
        <th translate-once>COMMON/airs-on/hdr</th>
        <td>{{sidepanel.translateDayOfWeek(sidepanel.serie.airs.day)}} {{sidepanel.serie.airs.time}} {{sidepanel.serie.airs.timezone}}</td>
      </tr>
      <tr ng-if="sidepanel.serie.first_aired" >
        <th translate-once>COMMON/first-aired/hdr</th>
        <td>{{ sidepanel.serie.first_aired | date:'mediumDate' }}</td>
      </tr>
      <tr ng-if="sidepanel.serie.status" >
        <th translate-once>COMMON/status/hdr</th>
        <td>{{sidepanel.translateStatus(sidepanel.serie.status)}}</td>
      </tr>
      <tr ng-if="sidepanel.serie.genres" >
        <th translate-once>COMMON/genre/hdr</th>
        <td>
          <ul class="list-unstyled">
            <li ng-repeat="genre in sidepanel.serie.genres track by $index">{{sidepanel.translateGenre(genre)}}</li>
          </ul>
        </td>
      </tr>
      <tr ng-if="sidepanel.serie.certification" >
        <th translate-once>COMMON/content-rating/hdr</th>
        <td>{{sidepanel.serie.certification}}</td>
      </tr>
      <tr ng-if="sidepanel.serie.country" >
        <th translate-once>COMMON/country/hdr</th>
        <td>{{sidepanel.serie.country}}</td>
      </tr>
      <tr ng-if="sidepanel.serie.network" >
        <th translate-once>COMMON/network/hdr</th>
        <td>{{sidepanel.serie.network}}</td>
      </tr>
      <tr ng-if="sidepanel.serie.rating" >
        <th translate-once>COMMON/rating/hdr</th>
        <td>{{sidepanel.ratingPercentage(sidepanel.serie.rating)}}% ({{sidepanel.serie.votes}} <span translate-once>COMMON/votes/lbl</span>)</td>
      </tr>
      <tr ng-if="sidepanel.serie.runtime" >
        <th translate-once>COMMON/run-time/hdr</th>
        <td>{{sidepanel.serie.runtime}}  <span translate-once>COMMON/minutes/lbl</span></td>
      </tr>
      <tr ng-if="sidepanel.serie.actors" >
        <th translate-once>COMMON/actors/hdr</th>
        <td>
          <ul class="list-unstyled">
            <li ng-repeat="actors in sidepanel.serie.actors track by $index">{{actors}}</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>
